<template>
    <div>
        <div id="container" style="height:600px"></div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            longitude: this.$route.query.longitude,
            latitude: this.$route.query.latitude,
        }
    },
    created() {
        
    },
    mounted() {
        this.initMap()
    },
    methods: {
        

        initMap() {
            var map = new AMap.Map('container', {
                resizeEnable: true, //是否监控地图容器尺寸变化
                zoom:11, //初始化地图层级
                center: [this.longitude, this.latitude] //初始化地图中心点
            });
            // 创建一个 Marker 实例：
            var marker = new AMap.Marker({
                position: new AMap.LngLat(this.longitude, this.latitude),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                // title: '北京'
                resizeEnable: true
            });

            // 将创建的点标记添加到已有的地图实例：
            map.add(marker);

             // 创建一个 Icon
            var startIcon = new AMap.Icon({
                // 图标尺寸
                size: new AMap.Size(25, 34),
                // 图标的取图地址
                image: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png',
                // image: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3086988016,1656260025&fm=26&gp=0.jpg',
                // 图标所用图片大小
                imageSize: new AMap.Size(135, 40),
                // 图标取图偏移量
                imageOffset: new AMap.Pixel(-9, -3)
            });

            // 将 icon 传入 marker
            var startMarker = new AMap.Marker({
                position: new AMap.LngLat(this.longitude, this.latitude),
                icon: startIcon,
                offset: new AMap.Pixel(-13, -30)
            });

             // 将 markers 添加到地图
            map.add([startMarker]);

        },

    },
}
</script>